<template>
  <view class="trade-popup-container bg-theme">
    <u-tabs
      font-size="28"
      :list="tabList"
      :current="current"
      :is-scroll="false"
      :show-bar="false"
      @change="onTabsChange"
      active-color="var(--brand-color)"
      inactive-color="#6e728d"
      bg-color="var(--page-part-color)"
    ></u-tabs>
    <view class="trade-ppopup-tabs-wrap"> </view>
    <view class="trade-popup-search">
      <ex-search-input
        @on-search-change="onSearchChange"
        :borderBottom="false"
        :borderRadius="50"
        :background="theme == 'dark' ? 'var(--page-part-color)' : '#f5f6f8'"
        :color="theme == 'dark' ? '#f5f6f8' : ''"
        :isPadding="true"
      ></ex-search-input>
    </view>
    <view class="trade-popup-table-wrap">
      <ex-table v-if="this.tableList.length > 0">
        <ex-tr>
          <ex-th>{{ $t("tradePopup.default[0]") }}</ex-th>
          <ex-th :isFilter="true" @onFilterClick="onPriceFilterClick">{{
            $t("tradePopup.default[1]")
          }}</ex-th>
          <ex-th :isFilter="true">{{ $t("tradePopup.default[2]") }}</ex-th>
        </ex-tr>
        <ex-tr
          v-for="(row, index) in tableList"
          :key="row.id"
          @onClick="onRowClick(row)"
        >
          <ex-td>
            <span class="main-label">{{ row.base_currency_code }}</span
            ><span class="sub-label">/{{ row.quote_currency_code }}</span>
          </ex-td>
          <ex-td>
            <span :class="[getColorByChange(row.currency_quotation.change)]">{{
              getPrice(row.currency_quotation.close)
            }}</span>
          </ex-td>
          <ex-td>
            <span :class="[getColorByChange(row.currency_quotation.change)]"
              >{{ formatChange(row.currency_quotation.change) }}%</span
            >
          </ex-td>
        </ex-tr>
      </ex-table>
      <view class="trade-popup-wraps" v-else>
        <ex-empty></ex-empty>
      </view>
    </view>
  </view>
</template>

<script>
import ExSearchInput from "@/components/ExSearch/SearchInput";
import { priceToFixed } from "@/utils/math.js";

export default {
  props: {
    symbol: {
      type: String,
      default: "",
    },
    optionList: { type: Array, default: () => [] },
  },
  components: { ExSearchInput },
  data() {
    return {
      current: 0,
      list: [],
      sub: {
        type: "sub",
        params: "DAY_MARKET",
        // params: "KLINE.BTC/USDT"
      },
    };
  },
  computed: {
    tabList() {
      let res = [];
      res.push({ name: this.$t("tradeDetail.default[7]") });
      this.list.forEach((item) => {
        res.push({ name: item.code });
      });
      return res;
    },
    tableList() {
      if (this.list.length > 0 && this.current > 0) {
        let data = this.list[this.current - 1].matches;
        return data.filter((item) => item.open_change === 1);
      } else if (this.current == 0) {
        return this.optionList.map((item) => {
          return item.currency_match;
        });
      }
      return [];
    },
    quoteId() {
      if (this.list.length > 0 && this.current > 0) {
        return this.list[this.current - 1].id;
      }
      return "";
    },
    wssData() {
      return this.$store.state.wss.wssData;
    },
  },
  watch: {
    wssData(newValue) {
      this.updateData(newValue);
    },
  },
  created() {
    this.fetchList();
  },
  methods: {
    getPrice(price) {
      return priceToFixed(price);
    },
    updateData(data) {
      if (data.type == "DAY_MARKET") {
        for (let index in this.tableList) {
          let target = this.tableList[index];
          if (target.id == data.currency_match_id) {
            Object.assign(target.currency_quotation, data.quotation);
            break;
          }
        }
      }
    },
    formatChange(change) {
      if (this.$u.test.isEmpty(change)) return "";
      if (change.startsWith("-")) {
        return change;
      } else {
        if (Number(change) > 0) {
          return `+${change}`;
        }
        return change;
      }
    },
    getColorByChange(change) {
      if (this.$u.test.isEmpty(change)) return "";
      if (change.startsWith("-")) {
        return "red";
      } else {
        if (Number(change) > 0) {
          return "green";
        }
        return "";
      }
    },
    onTabsChange(index) {
      this.current = index;
    },
    onPriceFilterClick(status) {
      /**
       * status: normal, down, up
       */
      console.log(status);
    },
    onSearchChange(text) {
      if (this.$u.test.isEmpty(text)) {
        this.fetchList();
      } else {
        this.searchList(text);
      }
    },
    searchList(text) {
      const path = "/market/currency_matches";
      const params = {
        search_name: text,
        quote_currency_id: this.quoteId,
      };
      this.$u
        .get(path, params)
        .then((res) => {
          if (res.code == 1) {
            this.list = res.data;
          }
        })
        .catch((err) => {});
    },
    fetchList() {
      const path = "/market/currency_matches";
      this.$u.get(path).then((res) => {
        if (res.code == 1) {
          const data = res.data;
          this.list = data;
        }
      });
    },
    onRowClick(row) {
      this.$emit("onRowClick", row);
    },
  },
};
</script>

<style lang="less" scoped>
.trade-popup-container {
  width: 100%;
  .trade-ppopup-tabs-wrap {
    width: 100%;
    font-weight: bold;
  }
  .trade-popup-search {
    padding: 0 30rpx;
  }

  .trade-popup-table-wrap {
    font-weight: bold;
    .main-label {
      font-weight: bold;
    }
    .sub-label {
      color: #c3c3cd;
      font-size: 24rpx;
    }
  }
}

.green {
  color: @green;
}

.red {
  color: #fc6668;
}

.trade-popup-wraps {
  position: relative;
  height: 700rpx;
}
</style>
